import React from 'react'
import { Space, Switch, Select, Button } from 'antd'
import { 
  BulbOutlined, 
  GlobalOutlined, 
  HistoryOutlined,
  DownOutlined
} from '@ant-design/icons'
import { Dropdown } from 'antd'

export interface ToolbarProps {
  theme: 'light' | 'dark'
  onThemeChange: (theme: 'light' | 'dark') => void
  language: string
  onLanguageChange: (language: string) => void
  recentTabs: { key: string; label: string }[]
  onTabClick: (key: string) => void
}

const Toolbar: React.FC<ToolbarProps> = ({
  theme,
  onThemeChange,
  language,
  onLanguageChange,
  recentTabs,
  onTabClick
}) => {
  // 语言选项
  const languageOptions = [
    { value: 'zh-CN', label: '中文' },
    { value: 'en-US', label: 'English' },
  ]

  // 常用标签页菜单配置
  const recentTabsMenu = {
    items: recentTabs.map(tab => ({
      key: tab.key,
      label: tab.label,
      onClick: () => onTabClick(tab.key)
    }))
  }

  return (
    <Space size="middle" style={{ display: 'flex', alignItems: 'center' }}>
      {/* 常用标签页 */}
      <Dropdown menu={recentTabsMenu} trigger={['click']}>
        <Button icon={<HistoryOutlined />}>
          常用标签 <DownOutlined />
        </Button>
      </Dropdown>

      {/* 切换明暗模式 */}
      <Switch
        checked={theme === 'dark'}
        onChange={(checked) => onThemeChange(checked ? 'dark' : 'light')}
        checkedChildren={<BulbOutlined />}
        unCheckedChildren={<BulbOutlined />}
      />

      {/* 切换语言 */}
      <Select
        style={{ width: 120 }}
        value={language}
        onChange={onLanguageChange}
        options={languageOptions}
        suffixIcon={<GlobalOutlined />}
      />
    </Space>
  )
}

export default Toolbar